<template>
  <div
    id="secondEchartsleft"
    class="homeEchartsClass"
    ref="chartContainer"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import { getChartData } from "@/api/charts";
import resize from "../mixins/resize.js";

export default {
  mixins: [resize],
  data() {
    return {
      seriesData: [],
    };
  },

  created() {
    this.funChartData();
  },
  watch: {
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
      this.chart=echarts.init(document.getElementById("secondEchartsleft"));
      this.chart.resize();
      }, 300);
      
    },
  },

  mounted() {



    const chartContainer = document.getElementById("secondEchartsleft");

    if (echarts.getInstanceByDom(chartContainer) === null) {
      this.chart = echarts.init(chartContainer);
      this.renderChart();
    }
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    funChartData() {
      getChartData().then((res) => {
        console.log(res);
        this.seriesData = res.testData;
        this.renderChart();
      });
    },

    renderChart() {
      // console.log(this.seriesData);
      const chartContainer = this.$refs.chartContainer;
      const option = {
        color: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#E8684A"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          itemHeight: 10,
          itemWidth: 10,
          itemGap: 20,
          orient: "horizontal",
          bottom: 0,
        },
        graphic: {
          type: "text",
          left: "center",
          top: "middle",
          silent: true,
          invisible: this.seriesData.length > 0,
          style: {
            fill: "#9d9d9d",
            fontWeight: "bold",
            text: "暂无数据",
            fontFamily: "Microsoft YaHei",
            fontSize: "25px",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: this.seriesData,
      };
      const chart = echarts.init(chartContainer);
      chart.setOption(option);
      window.onresize = function () {
        chart.resize();
       
      };
    },
  },
};
</script>

<style lang='scss' scoped>
.homeEchartsClass {
  width: 100%;
  height: 100%;
}
</style>

